<template>
  <div class="contact-list-container">
    <!-- 搜索框和添加好友按钮 -->
    <div class="search-and-add">
      <input v-model="searchQuery" type="text" placeholder="搜索联系人" class="search-input">
      <button class="add-friend-btn">+</button>
    </div>
    <!-- 联系人列表 -->
    <div
      v-for="(contact, index) in filteredContacts"
      :key="index"
      :class="['contact-item', { active: currentContact === contact }]"
      @click="selectContact(contact)"
      @contextmenu.prevent="showContextMenu(contact, $event)"
    >
      <img :src="contact.avatar" alt="Avatar" class="avatar">
      <div class="contact-info">
        <span class="name">{{ contact.name }}</span>&nbsp;&nbsp;
        <span class="last-message">{{ getLastMessage(contact) }}</span>
      </div>
      <!-- 根据未读消息数量显示红点 -->
      <span v-if="contact.unreadCount > 0" class="unread-dot"></span>
    </div>
    <!-- 右键菜单 -->
    <div
      v-if="contextMenuVisible"
      :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }"
      class="context-menu"
    >
      <ul>
        <li @click="deleteContact(contextMenuContact)">删除信息</li>
        <li @click="pinContact(contextMenuContact)">置顶信息</li>
        <li @click="markAsUnread(contextMenuContact)">标为未读</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import { useContactStore } from '../../stores/contacts';

const router = useRouter();
const contactStore = useContactStore();
const contacts = computed(()=>contactStore.contacts) ;

const currentContact = ref(null);
const searchQuery = ref('');
const contextMenuVisible = ref(false);
const contextMenuContact = ref(null);
const contextMenuX = ref(0);
const contextMenuY = ref(0);

const filteredContacts = computed(() => {
  return contacts.value.filter(contact =>
    contact.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

const selectContact = (contact) => {
  contactStore.setUnreadCount(contact.id, 0);  // 更新Pinia状态中的未读消息
  currentContact.value = contact;  // 设置当前联系人
  router.push({ path: '/chat', query: { contactId: contact.id } });
};

const getLastMessage = (contact) => {
  return contact.messages?.[contact.messages.length - 1]?.content || '';
};




const showContextMenu = (contact, event) => {
  event.stopPropagation();
  contextMenuVisible.value = true;
  contextMenuContact.value = contact;
  contextMenuX.value = event.clientX;
  contextMenuY.value = event.clientY;
};

const deleteContact = (contact) => {
  contactStore.deleteContact(contact.id);
  contextMenuVisible.value = false;
};

const pinContact = (contact) => {
  contactStore.pinContact(contact.id);
  contextMenuVisible.value = false;
};

const markAsUnread = (contact) => {
  contactStore.setUnreadCount(contact.id, contact.messages.length);
  contextMenuVisible.value = false;
};

onMounted(() => {
  const clickHandler = () => {
    contextMenuVisible.value = false;
  };
  const contextMenuHandler = (e) => {
    if (!document.querySelector('.contact-list-container').contains(e.target)) {
      contextMenuVisible.value = false;
    }
  };

  document.addEventListener('click', clickHandler);
  document.addEventListener('contextmenu', contextMenuHandler);

  onBeforeUnmount(() => {
    document.removeEventListener('click', clickHandler);
    document.removeEventListener('contextmenu', contextMenuHandler);
  });
});
</script>


<style scoped>
.contact-list-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  width: 100%;
  margin: 0; /* 水平居中 */
  box-sizing: border-box;
  padding: 0.5rem;
}

.search-and-add {
  display: flex;
  width: 100%;
  margin-bottom: 1rem;
}

.search-input {
  flex: 4; /* 搜索框占比调整 */
  padding: 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.3rem 0 0 0.3rem;
  box-sizing: border-box;
}

.add-friend-btn {
  flex: 1; /* 添加好友按钮占比调整 */
  padding: 0.5rem 0.75rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 0 0.3rem 0.3rem 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 0.625rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 0.3rem;
  margin-bottom: 0.625rem;
  position: relative;
  width: 100%;
}

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  margin-right: 0.625rem;
  flex-shrink: 0;
}

.contact-info {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.name {
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.last-message {
  font-size: 0.75rem;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unread-dot {
  width: 0.625rem;
  height: 0.625rem;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
}

.context-menu {
  position: absolute;
  background-color: white;
  border: 1px solid #e0e0e0;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  border-radius: 0.3rem;
  z-index: 100;
  min-width: 7.5rem;
}

.context-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.context-menu li {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}
</style>    